<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>导航钩子</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="generator" content="GitBook 3.2.2">
    <meta name="HandheldFriendly" content="true">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <router-link to="/foo/bar">
            bar
        </router-link>
        <router-view></router-view>
    </div>
    <script type="text/javascript">
    const Foo = {
        template: '<router-view></router-view>'
    }
    const Bar = {
        template: '<div>.....  Bar</div>'
    }

    const router = new VueRouter({
        routes: [{
            path: '/foo',
            component: Foo,
            children: [{
                path: 'bar',
                component: Bar,
                // a meta field
                meta: {
                    requiresAuth: true
                }
            }]
        }]
    })

    // todo  有问题

    // router.beforeEach((to, from, next) => {
    //     if (to.matched.some(record => record.meta.requiresAuth)) {
    //         // this route requires auth, check if logged in
    //         // if not, redirect to login page.
    //         if (!auth.loggedIn()) {
    //             next({
    //                 path: '/login',
    //                 query: {
    //                     redirect: to.fullPath
    //                 }
    //             })
    //         } else {
    //             next()
    //         }
    //     } else {
    //         next() // 确保一定要调用 next()
    //     }
    // })


    new Vue({
        router
    }).$mount('#app');
    </script>
</body>

</html>
